
<template>
  <div class="device-page">
    <SearchForm
        style="margin-bottom: 0"
        @search="onSearch"
        @reset="onReset"
        :search-list="searchList" :search-params="searchParams">
    </SearchForm>

    <div class="table-layout device-layout"
         v-loading="loading"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(255, 255, 255, 0.8)"
    >
      <el-card shadow="never" class="box-card">
        <div class="table-handle">
          <el-button style="margin-right: 15px" type="primary" size="mini" icon="el-icon-plus" @click="onAdd">新增</el-button>
        </div>
        <div class="charging-pile-list">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-for="pile in tableData" :key="pile.id">
              <el-card class="charging-pile-card" :class="getStatusClass(pile)">
                <div class="pile-header">
                  <div class="status-circle">
                    <span class="status-text">{{ getStatusText(pile) }}</span>
                  </div>
                  <div class="pile-info">
                    <div class="pile-title">
                      {{ pile.portName }} ({{ pile.portCode }})
                    </div>
                  </div>
                </div>
                <div class="pile-actions">
                  <el-button type="text" @click="onEdit(pile)">编辑</el-button>
                  <el-divider direction="vertical"></el-divider>
                  <el-button type="text" @click="handleStatusChange(pile)">
                    {{ pile.enabled == 0 ? '禁用' : '启用' }}
                  </el-button>
                  <el-divider direction="vertical"></el-divider>
                  <el-button type="text" @click="openCode(pile)">二维码</el-button>
                  <el-divider direction="vertical"></el-divider>
                  <el-button type="text" style="color: red" @click="onDelete(pile)">删除</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-empty v-if="tableData.length === 0"></el-empty>
        </div>
      </el-card>

      <div class="page-box">
        <el-pagination
            background
            :current-page="pageNo"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="changePageSize"
            @current-change="changePageNo"
        />
      </div>
    </div>
    <Add ref="addFormRef" :deviceId="deviceId" @get-page="initData" />
    <el-dialog
      title="二维码预览"
      :visible.sync="qrCodeDialogVisible"
      width="600px"
      append-to-body
      center>
      <div class="qr-code-container">
        <div id="qrCodeImage" class="qr-code-image">
          <img style="width: 300px" :src="currentQrCode" alt="二维码" v-if="currentQrCode"/>
        </div>
        <div class="qr-code-actions" style="text-align: center">
          <el-button type="primary" @click="downloadQrCode">下载二维码</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import crud from "@/mixins/crud";
import { http } from "@/api";
import Add from "./portAdd.vue";
import {CommonStatusEnum} from "@/utils/enum";
export default {
  name: "index",
  components: {
    Add,
  },
  props: {
    deviceId: {
      type: [Number,String],
      default: 0
    }
  },
  mixins: [crud],
  data() {
    return {
      request:http.port,
      searchList: [
        {
          label: '枪口编号',
          prop: 'portCode',
          name: 'input',
          clearable: true
        },
        {
          label: '枪口名称',
          prop: 'portName',
          name: 'input',
          clearable: true
        },
        {
          label: '枪口状态',
          prop: 'portState',
          name: 'select',
          clearable: true,
          options: [
            {
              label: '全部',
              value: ''
            },
            {
              label: '空闲',
              value: 'N'
            },
            {
              label: '充电中',
              value: 'Y'
            },
            {
              label: '故障',
              value: 'F'
            }
          ]
        }
      ],
      searchParams: {
        portName: '',
        portCode: '',
        portState: ''
      },
      defaultParams: {
        stationId: this.deviceId
      },
      tableData: [

      ],
      qrCodeDialogVisible: false,
      currentQrCode: '',
      currentPort: {}
    }
  },
  methods: {
    openCode(item) {
      this.currentPort = item
      this.currentQrCode = item.miniappPic // 假设二维码URL存储在item.qrCode中
      this.qrCodeDialogVisible = true
    },
    downloadQrCode() {
      if (!this.currentQrCode) return

      // 创建一个临时的a标签用于下载
      const link = document.createElement('a')
      link.href = this.currentQrCode
      link.download = `${this.currentPort.portCode}_${new Date().getTime()}.png`

      // 处理base64图片下载
      if (this.currentQrCode.startsWith('data:image')) {
        const binary = atob(this.currentQrCode.split(',')[1])
        const array = new Uint8Array(binary.length)
        for (let i = 0; i < binary.length; i++) {
          array[i] = binary.charCodeAt(i)
        }
        const blob = new Blob([array], { type: 'image/png' })
        link.href = URL.createObjectURL(blob)
      }

      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)

      this.$message({
        type: 'success',
        message: '二维码下载成功'
      })
    },
    async handleStatusChange(row) {
      await http.port.updateStatus({
        id: row.id,
        enabled: row.enabled == 1 ? 0 : 1
      })
      // 刷新列表
      await this.onSearch()
    },
    getStatusClass(row) {
      const statusMap = {
        N: 'status-idle',
        offline: 'status-offline',
        Y: 'status-charging',
        disabled: 'status-disabled',
        F: 'status-fault'
      }
      if (row.enabled == CommonStatusEnum.DISABLE) {
        return statusMap.disabled
      }
      return  statusMap[row.portState]
    },
    getStatusText(row) {
      const statusMap = {
        N: '空闲',
        offline: '离线',
        Y: '使用中',
        disabled: '停用',
        F: '故障'
      }
      if (row.enabled == CommonStatusEnum.DISABLE) {
        return statusMap.disabled
      }
      return  statusMap[row.portState]
    },
    getTypeName(type) {
      let typeName = {
        0: '慢充',
        1: '快充'
      }
      return typeName[type] || type
    }
  }
}
</script>

<style lang="scss">
.device-page {
  .el-card__body {
    padding: 12px !important;
  }
  .charging-pile-list {
    padding: 12px;
    border:1px solid #EBEEF5;
  }
  .charging-pile-card {
    margin-bottom: 20px;
    border-radius: 8px;
    .pile-actions {
      padding-top: 8px;
    }
    .el-card__body {
      padding-bottom: 8px;
    }

    &.status-idle .status-circle {
      background-color: #67C23A;
    }
    &.status-offline .status-circle {
      background-color: #909399;
    }
    &.status-charging .status-circle {
      background-color: #409EFF;
    }
    &.status-disabled .status-circle {
      background-color: #F56C6C;
    }
    &.status-fault .status-circle {
      background-color: #909399;
    }
  }

  .pile-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
  }

  .status-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
  }

  .pile-info {
    flex-grow: 1;

    .pile-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .pile-details {
      color: #666;
      font-size: 14px;
      line-height: 1.5;
    }
  }

  .qr-code {
    font-size: 24px;
    color: #409EFF;
  }

  .pile-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #EBEEF5;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .el-button {
      font-size: 14px;
    }
  }
}
.qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;

  .qr-code-image {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .qr-code-actions {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

</style>
